<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<style>
section .container .loginbox .username {
	border-bottom: 1px solid #eaeaea;
}

section .container .loginbox .password {
	border-bottom: 1px solid #eaeaea;
}

section .container .loginbox .id {
	border-bottom: 1px solid #eaeaea;
}

section .container .loginbox .yzm {
	align-items: center;
}
</style>
</head>
<body>
	<!-- header start -->
	#@loginHead("注册","
	<a href='/login'>登录</a>")
	<!-- end header -->
	<section id="login">
		<div class="container">
			<div class="logo">
<!-- 				<img src="/assets/img/logo.png" width="100%" title="人车人" alt="人车人" /> -->
			</div>
			<div class="loginbox">
				<form id="form">
					<!--                     <div class="inputbox realname"> -->
					<!--                         <input type="text" name="realname" placeholder="姓名" onchange="check1()"/>       -->
					<!--                     </div> -->
					<div class="inputbox username">
						<input type="tel" name="username" placeholder="手机号"
							onchange="check1()" />
					</div>
					<div class="inputbox password">
						<input type="password" name="password" placeholder="密码"
							onchange="check1()" />
					</div>
					#if(inviteCode!=null)
					<div class="inputbox id" style="display:none">
					    <input type="text" name="id" placeholder="邀请码" value="#(inviteCode)" />      
					</div> 
					#else 
					<div class="inputbox id"> 
					    <input type="text" name="id" placeholder="邀请码" onchange="check1()" />       
					</div> 
					#end 
					<div class="inputbox flexbox yzm">
						<input type="tel" name="yzm" class="flex" placeholder="验证码"
							onchange="check2()" /> <a href="javascript:;" id="getyzm"
							class="getyzm fail">获取验证码</a>
					</div>
				</form>
			</div>
			<div class="btnbox">
				<a href="javascript:;" id="btn" class="login fail">注册</a>
				<div class="flexbox">
					<p>
						我已阅读并同意<a href="reg.html" class="reg sam"></a>
					</p>
				</div>
			</div>
		</div>
	</section>

	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
        $(document).ready(function(){
        	var getyzmFilter = false
            $("#getyzm").on("click",function(){
            	if (getyzmFilter) {
					return false
				}
            	if (check1()) {
            		var form = $("#form")
            		var data = form.serialize()
            		$.ajax({
            			type: "POST",
                        url: "/login/getVerifyCode",
                        data: data,
                        success: function(data){
                        	if (data.code!="2") {
                           		_x.showTip(data.msg);
            				}else{
            					getyzmFilter = true
            					var timeout = 120
            					var interval = setInterval(function(){
            						timeout--
            						$("#getyzm").html("获取验证码("+timeout+")")
            						if (timeout==0) {
            							$("#getyzm").html("获取验证码")
            							getyzmFilter = false
            							clearInterval(interval)
									}
            					}, 1000)
            				}
                        }
            		})
				}
            })
            
            var isSubmit = true;
            $("#btn").on("click",function(){
            	if(!isSubmit)return
            	isSubmit = false;
            	$("#btn").html("<div class='textloading'></div>")
            	if (check2()) {
            		var form = $("#form")
            		var data = form.serialize()
            		$("#btn").html("<div class='textloading'></div>")
            		$.ajax({
            			type: "POST",
                        url: "/login/reg",
                        data: data,
                        success: function(data){
                        	if (data.code==0) {
								location.href = data.msg
							}else{
								_x.showTip(data.msg);
								isSubmit = true;
								$("#btn").html("注册")
							}
                        },
                        error:function(){
                        	isSubmit = true;
                        	$("#btn").html("注册")
                        }
                    })
				}else{
					isSubmit = true;
					$("#btn").html("注册")
				}
            })
        });
        function check1(){
        	$("#getyzm").removeClass("success")
			$("#getyzm").addClass("fail")
        	//var $name = $(document.getElementsByName("realname"))
        	var $username = $(document.getElementsByName("username"))
        	//var $id = $(document.getElementsByName("id"))
        	var $password = $(document.getElementsByName("password"))
        	/*if ($name.val()=="") {
        		_x.showTip("姓名不能为空！");
        		$name.val("");
				return false
			}*/
        	if ($username.val()=="") {
        		_x.showTip("手机号不能为空！");
				return false
			}else if($username.val().length!=11||/[^0-9]/.test($username.val())){
				_x.showTip("手机号码无效！");
				return false
			}
        	if ($password.val()=="") {
        		_x.showTip("密码不能为空！");
				return false
			}
			/*if($id.val() != "" && /[^a-zA-Z0-9]/.test($id.val())){
				_x.showTip("邀请码格式不正确！");
				return false
			}*/
			$("#getyzm").removeClass("fail")
			$("#getyzm").addClass("success")
        	return true
        }
        function check2(){
        	check1()
        	var $yzm = $(document.getElementsByName("yzm"))
        	if ($yzm.val()==null||$yzm.val().length==0) {
				//$yzm.attr("placeholder","验证码不能为空！")
				_x.showTip("验证码不能为空！");
				$yzm.val("");
				return false
			}else if(/[^0-9]/.test($yzm.val())||$yzm.val().length!=4){
				//$yzm.attr("placeholder","验证码不正确！")
				_x.showTip("验证码不正确！");
				return false
			}
        	return true
        }
    </script>
</body>
</html>